import { Charts } from "./Charts/Charts";
import { Search } from "./Search/Search";
import { Info } from "./Info/Info";
import { useEffect } from "react";
import { observer, } from "mobx-react";
import { FullScreenCharts } from "./Charts/FullScreenChart";
import { Statistic } from "./Statistic/Statistic";
import { Recommend } from "./Statistic/Recommend";
import ChartStore from "../../stores/ChartStore";
import { Loading } from "../../components/Loading";
import './StockIndex.scss';
import { Search_Bg_Img } from "../../images/SearchBg";
import { registerGlobalFuncs } from "../../utils/globalFuncs";

export const StockIndex = observer((props: any) => {
  let symbol = props.match.params.symbol;
  useEffect(() => {
    registerGlobalFuncs();
    (window as any).stockSearch(symbol)
  }, []);
  if (ChartStore.fullScreen) {
    return <FullScreenCharts />;
  }
  return (
    <div className="StockIndex section-5 wf-section" style={{ backgroundImage: `url('${Search_Bg_Img}')` }}>
      <div className="StockWrapper">
    
        <Search />
        <Info />
        {ChartStore.stockTab === 1 ? <Statistic /> : ChartStore.stockTab === 2 ? <Charts /> : <Recommend />
        }
  <div className="loading-content" style={{ display: ChartStore.pending ? 'block' : 'none' }}>
        <Loading />
      </div>
      </div>
    </div>
  );
});
